<template>
  <div id="Service">
    <div class="container text-center">
      <h3>我们的服务</h3>
      <p style="color: #b2b2b2">The Best Service You Never See</p>
    </div>
  
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">

  <van-swipe-item v-for='(i,k) in ban_arr' :key="k" v-if='i.type==2'>
     <img  :src="$base+i.licon" class="ban" @click="open_url(i.linkurl)"/>
  </van-swipe-item>
  <!-- <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item> -->
 </van-swipe>


    <div class="container">
      <div class="Service-container row">
        <div
          class="Service-item col-xs-12 col-sm-6 col-md-3 wow slideInUp"
          v-for="(item, index) in serviceList"
          :key="index"
          @click="ServiceClick(item)"
        >
          <div class="Service-item-wrapper">
            <div class="Service-item-top">
              <h4>{{ item.title }} <div v-if='new_arr.length&&index==0' class="yuan"></div></h4>
              
              <i></i>
              <!-- <p>{{item.eng_title}}</p> -->
            </div>
            <!-- <div class="Service-item-img">
                            <img :src="item.img" alt="服务">
                        </div> -->
            <div class="Service-item-border"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "Service",
  data() {
    return {
      new_arr:[],
      ban_arr:[],
      timer:'',
      serviceList: [
        {
          id: "section-1",
          title: "产品中心",
          page:'/One',
          eng_title: "Customize App",
          img: require("@/assets/img/service1.jpg"),
        },
        {
          id: "section-8",
          title: "软件产品",
          eng_title: "iOS App Dev",
          img: require("@/assets/img/service4.jpg"),
        },
        {
          id: "section-2",
          title: "计量服务",
          page:'/product',
          eng_title: "Outsourcing",
          img: require("@/assets/img/service2.jpg"),
        },
        {
          id: "section-3",
          title: "检测服务",
          eng_title: "eCommerce Site",
          img: require("@/assets/img/service3.jpg"),
        },
         {
          id: "section-5",
          title: "标准查询",
          page:'/standard',
          eng_title: "iOS App Dev",
          img: require("@/assets/img/service4.jpg"),
        },
        {
          id: "section-6",
          title: "维修与培训",
          eng_title: "iOS App Dev",
          img: require("@/assets/img/service4.jpg"),
        },
        {
          id: "section-4",
          title: "知识库",
          eng_title: "iOS App Dev",
          img: require("@/assets/img/service4.jpg"),
        },
        {
          id: "section-7",
          title: "二手设备和升级改造",
          eng_title: "iOS App Dev",
          img: require("@/assets/img/service4.jpg"),
        },
        
        {
          id: "section-9",
          title: "客户中心",
          eng_title: "iOS App Dev",
          img: require("@/assets/img/service4.jpg"),
        },
        {
          id: "section-10",
          title: "资质中心",
          page:'/filelist',
          eng_title: "iOS App Dev",
          img: require("@/assets/img/service4.jpg"),
        },
        {
          id: "section-11",
          title: "积分兑换",
          page:'/jifen',
          eng_title: "iOS App Dev",
          img: require("@/assets/img/service4.jpg"),
        },
      ],
    };
  },
  
  mounted() {
  //  window.location.reload();
    //  this.timer= setTimeout(()=>{
       
    // },1000);
    let refresh=localStorage.getItem('ss');
    if(!refresh){
      window.location.reload();
      localStorage.setItem('ss','ok');
    };
   

    var wow = new WOW();
    wow.init();
    let lg = localStorage.getItem("lg");

    

    // if (!lg) {
    //   this.$router.replace("/login");
    // }
   
   this.get_ban();
   this.get_news()

  },
  methods: {
    get_news(){
     

      this.http.post('/products/remainmsgpro',).then(res=>{
         console.log('new21:',res)
         if(res.data.data){
              let dd=res.data.data;
              for(let i of dd){
                v.new_arr.push(i.msg)
              }
          }; 
      })
    },
    open_url(i){
      if(i){
          window.open(this.$base + i);
      }
     
    },
    get_ban(){
      let v=this;
      this.http.post('/products/getindexmsg').then(res=>{
        console.log('ban:',res);
        if(res.data.data){
         v.ban_arr=res.data.data;
        };
       

      })
    },
    ServiceClick(i) {
      if(i.id=='section-2'){
         this.$router.push({path:'/jiliang',query:{
           type:2
         }})
         return;
      }
       if(i.id=='section-6'){
         this.$router.push({path:'/repair'})
         return;
      }

      if(i.id=='section-8'){
         this.$router.push({path:'/ruan',query:{
           info:'rj'
         }})
         return;
      }

       if(i.id=='section-7'){
         this.$router.push({path:'/device'})
         return;
      }
    
     if(i.id=='section-3'){
         this.$router.push({path:'/jiance',query:{
           type:3
        }})
         return;
      }

     if(i.id=='section-11'){
         this.$router.push({path:'/jifen'})
         return;
      }
      

      if(i.id=='section-9'){
         this.$router.push({path:'/person'})
         return;
      }
      
      if(i.id=='section-4'){
         this.$router.push({path:'/konw'})
         return;
      }

       this.$router.push(i.page)
      // this.$router.push({
      //   name: "servicedetail",
      //   params: {
      //     id: id,
      //   },
      // });
    },
  },
};
</script>
<style scoped>
  .yuan{
    width: 10px;height: 10px; border-radius: 5px;background-color: red;
  }
  .ban{
   width: 100%;
   height: 250px;
   }
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
.Service-container {
  padding: 30px 50px;
}
.Service-item {
  margin-bottom: 50px;
}
.Service-item-wrapper {
  cursor: pointer;
  background: rgba(244, 244, 244, 1);
  overflow: hidden;
  position: relative;
}
.Service-item-top {
  width: 100%;
  height: 120px;
  padding: 30px;
  text-align: center;
}
.Service-item-top > i {
  display: inline-block;
  width: 25px;
  height: 2px;
  background: #28f;
}
.Service-item-top > p {
  color: #b2b2b2;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
}
.Service-item-img {
  width: 100%;
  overflow: hidden;
}
.Service-item-img img {
  width: 100%;
  transition: all 0.5s ease;
}
.Service-item-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border: 1px solid #000;
  opacity: 0;
}
.Service-item-wrapper:hover .Service-item-top > i {
  opacity: 0;
}
.Service-item-wrapper:hover .Service-item-top > p {
  opacity: 1;
  transform: translateY(-10px);
}
.Service-item-wrapper:hover .Service-item-img > img {
  transform: scale(1.1, 1.1);
}
.Service-item-wrapper:hover > .Service-item-border {
  opacity: 1;
  width: 90%;
  height: 90%;
}
</style>

